<template>
	<u-navbar back-text="返回" :height="barHeight" :title="title" :is-back="false" :title-color="textColor" :background="{background: backgroundColor}"
		:immersive="immersive" :border-bottom="false">
		<view class="myIsBack" @click="goback" :style="{'margin-left': margin + 'rpx'}">
			<image src="../../static/images/common/fanhui.png"></image>
		</view>
		<view class="right" slot="right" :style="{'margin-right': margin + 'rpx','color': textColor}">
			<slot></slot>
		</view>
	</u-navbar>
</template>

<script>
	export default {
		name: 'NavBar',
		props: {
			//标题名
			title: {
				type: String,
				default: () => ''
			},
			//
			immersive: {
				type: Boolean,
				default: () => true
			},
			//跳转的页面
			url: {
				type: String,
				default: () => ""
			},
			//跳转的方式
			type: {
				type: String,
				default: () => "redirectTo"
			},
			//导航栏文本颜色
			textColor: {
				type: String,
				default: () => '#fff'
			},
			//导航背景颜色
			backgroundColor: {
				type: String,
				default: () => '#0284ff'
			},
		},
		data() {
			return {
				margin: 35,
				statusBarHeight:"",
				barHeight:40,
			}
		},
		created() {
			/**
			 * 两种获取状态栏高度
			 */
			//Vuex获取状态栏高度
			console.log(this.vuex_status_bar_height,'vuex状态栏高度')
			console.log(this.vuex_custom_bar_height,'vuex自定义状态栏高度')
			// ----------------------------------------------------
		    // 状态栏高度
		    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; 
			//console.log(this.statusBarHeight,'this.statusBarHeight')
			//#ifdef MP-WEIXIN
		    // 胶囊数据
		    const { top, height } = wx.getMenuButtonBoundingClientRect();
			// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
			//console.log(this.barHeight,'this.barHeight')
			//#endif
		},
		methods: {
			//定义自定义返回事件
			goback() {
				const canNavBack = getCurrentPages()
				if (canNavBack && canNavBack.length > 1) {
					if (this.type === "self") {
						this.$emit("go")
						return
					}
					if (this.url) {
						uni[this.type]({
							url: this.url,
							success: function(e) {
								console.log("e")
							},
							fail: function(e) {
								console.log("err", e)
							}
						})
					} else {
						uni.navigateBack({
							delta: 1
						});
					}
				} else {
					history.back()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myIsBack {
		width: 60rpx;
		height: 60rpx;
		background: rgba(216, 216, 216, 0.1);
		border-radius: 50%;
		backdrop-filter: blur(20px);
		box-shadow: inset 0px -10px 10px 0px rgba(10, 8, 9, 0.15), inset 0px 10px 10px 0px rgba(24, 57, 48, 0.15);
		text-align: center;
		line-height: 60rpx;
		position: relative;

		image {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			height: 30rpx;
			width: 20rpx;
		}
	}
	
	.u-navbar {
		.u-navbar-inner {
			.u-title {
				color: #fff !important;
			}
		}
	}
</style>
